<template>
    <div class="exam-container">
        <div class="filter-section">
            <div style="display: flex">
                <div style="width: 90px">
                    课程分类:
                </div>
                <el-radio-group v-model="radio">
                    <el-radio>全部</el-radio>
                    <el-radio
                            v-for="item in courseTypeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    >
                        <span>{{ item.name }} </span>
                    </el-radio>
                </el-radio-group>
            </div>
            <div class="tab-group">
                <el-tabs v-model="activeName" style="height: 50vh;" @tab-click="handleClick">
                    <el-tab-pane label="课件" name="first">
                        <section class="courses">
                            <div class="course-list">
                                <div v-for="course in courses" :key="course.id" class="course" @click="toPeriod(course.id)">
                                    <img
                                            :src="serverIp + course.url"
                                            :alt="course.name"
                                            @error="handleImageError"
                                    >
                                    <!--<h3>{{ course.title }}</h3>-->
                                    <!--<p>{{ course.description }}</p>-->
                                    <div class="btn">{{ course.name	 }}</div>
                                </div>
                            </div>
                        </section>
                    </el-tab-pane>
                    <el-tab-pane label="微课" name="second">
                        <section class="courses">
                            <div class="vertical-list">
                                <div
                                        v-for="live in lives"
                                        :key="live.id"
                                        class="course-vertical"
                                >
                                    <div class="live-badge" :class="getStatusClass(live.flow)">
                                        {{ getStatusText(live.flow) }}
                                    </div>
                                    <div class="vertical-content">
                                        <div class="vertical-info">
                                            <h3 class="live-title">微课名称：{{ live.name }}</h3>
                                            <h3 class="live-title">微课课程：{{ live.courseName }}</h3>
                                            <div class="live-info">
                                                <span class="time">{{ live.startTime }}</span>
                                                <span class="viewers">👤 {{ live.teachName }}</span>
                                            </div>
                                            <div class="button-container">
                                                <el-button class="live-button" icon="View" type="success" @click="openLiveDialog(live)">直播</el-button>
                                                <el-button class="live-button" icon="View" type="warning" @click="toLiveBack(live.id)">录播</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </el-tab-pane>
                </el-tabs>
                <!-- 分页组件 -->
                <div style="justify-content: center">
                    <el-pagination
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :page-sizes="[8, 20, 30, 50]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            :background="true"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
    </div>
    <el-dialog
            :style="dialogStyle"
            v-model="dialogVisible"
            title="微课播放"
            :before-close="handleClose"
    >
        <VideoPlayer :src="currentLiveUrl" />
    </el-dialog>
</template>

<script>
    import request from "~/utils/request.js";
    import {ref} from 'vue'
    import {serverIp} from "~/utils/config.js";
    import nomore from '~/assets/nomore.png'
    import VideoPlayer from '~/components/VideoPlayer.vue'

    export default {
        name: "course",
        components: {
            VideoPlayer
        },
        data() {
            return {
                windowWidth: window.innerWidth,
                nomoreimg: nomore,
                serverIp, // 引入配置文件中的serverIp变量
                search: '',
                radio: '',
                state: '',
                courseTypeOptions: [],
                courses: [],
                activeName: 'first',
                currentPage: 1,
                pageSize: 8,
                total: 0,
                lives: [],
                userId: this.$store.state.user.id,
                dialogVisible: false,
                currentLiveUrl: '',
            }
        },
        computed: {
            dialogStyle() {
                return this.windowWidth <= 768 ? { width: '90%' } : { width: '50%' };
            },
        },
        mounted() {
            window.addEventListener('resize', this.handleResize);
        },
        beforeUnmount() {
            window.removeEventListener('resize', this.handleResize);
        },
        activated() {
            this.load()
            this.getCourseTypeOptions()
        },
        watch: {
            radio() {
                if (this.activeName === "first") {
                    this.state = ""
                } else if (this.activeName === "second") {
                    this.state = 0
                }
                this.getPage()
            },
            activeName() {
                this.getPage()
            }
        },
        methods: {
            handleResize() {
                this.windowWidth = window.innerWidth;
            },
            load() {
                this.getPage()
            },
            handleClick(tab) {
                this.activeName = tab.props.name;
            },
            // 切换时调用
            getPage(){
                if (this.activeName === "first") {
                    request.get("/course/stuPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        typeId: this.radio,
                        name: this.search,
                        userId: this.userId,
                    }
                }).then(res => {
                    if (res.code === "200") {
                        this.courses = res.data.records
                        this.total = res.data.total
                    }
                })
                } else if (this.activeName === "second") {
                    request.get("/live/stuPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        typeId: this.radio,
                        name: this.search,
                        userId: this.userId,
                    }
                }).then(res => {
                    if (res.code === "200") {
                        this.lives = res.data.records
                        this.total = res.data.total
                    }
                })
                }
            },
            getCourseTypeOptions() {
                request.get("/course-type/all").then(res => {
                    this.courseTypeOptions = res.data
                })
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
            toPeriod(scope) {
                this.$router.push({path: "/course/period", query: {courseId: scope}})
            },
            getStatusClass(status) {
                return {
                    1: 'living',
                    0: 'upcoming',
                    2: 'ended'
                }[status]
            },
            getStatusText(status) {
                return {
                    1: '开讲中',
                    0: '未开始',
                    2: '已结束'
                }[status]
            },
            handleImageError(e) {
                e.target.src = nomore  // 直接使用导入的nomore路径
                e.target.classList.add('img-error') // 可选：添加错误样式
            },
            openLiveDialog(live) {
                this.currentLiveUrl = live.url;
                this.dialogVisible = true;
            },
            // 关闭弹窗回调
            handleClose() {
                this.dialogVisible = false;
            },
            toLiveBack(liveId) {
                this.$router.push({path: "/live/livePlayback", query: {liveId: liveId}})
            }
        }
    }
</script>

<style scoped>
    .exam-container {
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .filter-section {
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-group span {
        font-size: 16px;
        color: #333;
    }

    .tab-group {
        flex-direction: column;
    }

    :deep(.el-tabs__content) {
        flex: 1;
        padding: 16px 0;
        overflow: auto;
    }

    :deep(.el-tab-pane) {
        height: 100%;
    }

    .exam-overview {
        display: flex;
        gap: 20px;
        padding: 8px 0;
    }

    .stats-card {
        flex: 1;
        background: #f8f9fa;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: all 0.3s;
    }

    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .stats-card h3 {
        font-size: 16px;
        color: #666;
        margin-bottom: 12px;
    }

    .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #1890ff;
    }

    .button-container {
        display: flex;
        width: 100%;
        gap: 8px; /* 按钮之间的间距 */
    }

    .live-button {
        flex: 1; /* 各占一半 */
    }

    @media (max-width: 768px) {
        .exam-overview {
            flex-direction: column;
        }

        .stats-card {
            margin-bottom: 16px;
        }
    }

    .exam-history-list {
        padding: 10px;
    }

    /* 修改分页布局 */
    .el-pagination {
        display: flex;
        justify-content: center;
        margin-top: 24px !important;
    }

    .course {
        width: calc(25% - 32px); /* 调整间距 */
        margin: 16px;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        background: white;
    }

    .course:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {

        .course {
            width: calc(33.3% - 32px);
        }
    }

    @media (max-width: 992px) {
        .course {
            width: calc(50% - 32px);
        }
    }

    @media (max-width: 576px) {
        .course {
            width: 100%;
        }
    }

    .btn {
        margin-top: 20px;
        display: inline-block;
        background-color: #ff6600;
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
    }

    .courses {
        padding: 0;
        text-align: center;
    }


    .course-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .img-error {
        background: #f5f7fa url('~/assets/nomore.png') no-repeat center/50%;
        border: 1px dashed #ddd;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .img-error {
            height: 150px;
        }
    }

    /* 原有课程图片样式新增 */
    .course img {
        width: 100%;
        height: 200px; /* 固定高度 */
        object-fit: cover; /* 保持图片比例 */
        border-radius: 5px;
        margin-bottom: 10px;
    }
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }

    /* 微课状态角标 */
    .live-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: white;
        z-index: 1;
    }

    /* 不同状态颜色 */
    .live-badge.living {
        background: #ff4d4f;
        animation: pulse 1.5s infinite;
    }

    .live-badge.upcoming {
        background: #1890ff;
    }

    .live-badge.ended {
        background: #999;
    }

    /* 微课标题 */
    .live-title {
        margin: 12px 0;
        font-size: 16px;
        color: #333;
    }

    /* 微课信息容器 */
    .live-info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
    }

    /* 呼吸动效 */
    @keyframes pulse {
        0% {
            opacity: 0.9;
        }
        50% {
            opacity: 0.6;
        }
        100% {
            opacity: 0.9;
        }
    }

    /* 保持课程原有布局 */
    .course {
        position: relative; /* 使角标能绝对定位 */
        /* 复用原有课程卡片样式 */
    }


    /* 纵向布局容器 */
    .vertical-list {
        width: 100%;
        max-width: 800px;  /* 控制最大宽度保持阅读友好 */
        margin: 0 auto;
    }

    /* 纵向课程卡片 */
    .course-vertical {
        position: relative;
        width: 100%;
        margin: 16px 0;  /* 保持垂直间距 */
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        background: white;
    }

    /* 保持悬停效果 */
    .course-vertical:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    /* 纵向内容布局 */
    .vertical-content {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .vertical-content img {
        width: 120px;
        height: 90px;
        border-radius: 8px;
        object-fit: cover;
    }

    .vertical-info {
        flex: 1;
        text-align: left;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .vertical-content {
            flex-direction: column;
        }

        .vertical-content img {
            width: 100%;
            height: auto;
        }

        .vertical-info {
            width: 100%;
        }

        .live-info {
            gap: 8px;
        }

        /* 分页样式 */
        .el-pagination {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .el-pagination__total {
            order: 1;
            width: 50%;
            text-align: left;
        }

        .el-pagination__sizes {
            order: 2;
            width: 50%;
            text-align: right;
        }

        .el-pagination .btn-prev,
        .el-pagination .el-pager,
        .el-pagination .btn-next {
            order: 3;
            width: 100%;
            text-align: center;
            margin: 10px 0;
        }

        .el-pagination .el-pagination__jump {
            order: 4;
            width: 100%;
            text-align: center;
        }
    }
</style>
